<template>
  <div class="home">
    <div class="container">
      <div class="top-bar">
        <h1>工具列表</h1>
      </div>
      
      <!-- 添加新日志表单 -->
      <div class="add-log-row">
        <input v-model="formData.name" placeholder="请输入名称" required />
        <button @click="handleSubmit" class="btn btn-primary">添加日志</button>
      </div>

      <!-- 日志列表 -->
      <div class="logs-section">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else-if="logs.length === 0" class="empty">暂无日志数据</div>
        <div v-else class="logs-table">
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>UUID</th>
                <th>名称</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(log, idx) in logs" :key="log.no">
                <td>{{ idx + 1 }}</td>
                <td>{{ log.uuid }}</td>
                <td>
                  <span v-if="!log.editing">{{ log.name }}</span>
                  <input
                    v-else
                    v-model="log.editName"
                    type="text"
                    class="form-control"
                    @blur="saveEdit(log)"
                    @keyup.enter="saveEdit(log)"
                  />
                </td>
                <td>
                  <button
                    v-if="!log.editing"
                    @click="startEdit(log)"
                    class="btn btn-small btn-secondary"
                  >
                    编辑
                  </button>
                  <button
                    @click="handleDelete(log.no)"
                    class="btn btn-small btn-danger"
                  >
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAllLogs, createLog, updateLog, deleteLog, type Log } from '@/api/logApi'
import { useRouter } from 'vue-router'

// 扩展 Log 类型，添加编辑相关属性
interface ExtendedLog extends Log {
  editing: boolean
  editName: string
}

const logs = ref<ExtendedLog[]>([])
const loading = ref(false)
const error = ref('')
const formData = ref({ name: '' })

// 加载日志列表
const loadLogs = async () => {
  loading.value = true
  error.value = ''
  try {
    const response = await getAllLogs()
    if (response.success && response.data) {
      logs.value = response.data.map(log => ({
        ...log,
        editing: false,
        editName: log.name
      }))
    } else {
      error.value = response.message || '加载失败'
    }
  } catch (err) {
    error.value = '加载失败'
  } finally {
    loading.value = false
  }
}

// handleSubmit 只传 name 字段
function handleSubmit() {
  if (!formData.value.name) return alert('请输入名称');
  fetch('http://localhost:3000/api/logs', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: formData.value.name })
  })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        formData.value.name = '';
        loadLogs();
        alert('添加成功！');
      } else {
        alert(data.message || '添加失败');
      }
    })
    .catch(() => alert('添加失败'));
}

// 开始编辑
const startEdit = (log: ExtendedLog) => {
  log.editing = true
  log.editName = log.name
}

// 保存编辑
const saveEdit = async (log: ExtendedLog) => {
  try {
    const response = await updateLog(log.no, {
      uuid: log.uuid,
      name: log.editName
    })
    if (response.success) {
      log.name = log.editName
      log.editing = false
      alert('更新成功！')
    } else {
      alert(response.message || '更新失败')
    }
  } catch (err) {
    alert('更新失败')
  }
}

// 删除日志
const handleDelete = async (no: number) => {
  if (!confirm('确定要删除这条日志吗？')) {
    return
  }
  try {
    const response = await deleteLog(no)
    if (response.success) {
      await loadLogs()
      alert('删除成功！')
    } else {
      alert(response.message || '删除失败')
    }
  } catch (err) {
    alert('删除失败')
  }
}

onMounted(() => {
  loadLogs()
})
</script>

<style scoped>
.home {
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

h2 {
  color: #34495e;
  margin-bottom: 20px;
}

.form-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 15px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #495057;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  margin-right: 5px;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

.logs-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.loading, .error, .empty {
  padding: 20px;
  text-align: center;
  color: #6c757d;
}

.error {
  color: #dc3545;
}

.logs-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

tr:hover {
  background-color: #f8f9fa;
}

.add-log-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.add-log-row label {
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 6px;
  color: #444;
}
.add-log-row input {
  flex: 1;
  height: 44px;
  font-size: 16px;
  padding: 0 12px;
}
.add-log-row button {
  height: 44px;
  min-width: 110px;
  font-size: 16px;
  margin-left: 0;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .form {
    grid-template-columns: 1fr;
  }
  
  .logs-table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px;
  }
}
</style> 